<template>
  <div>
    <div class="html">
      <div class="header">
        <span></span>
        <span>商城</span>
        <span class="iconfont icon-xinxi" style="font-size: 0.2rem"></span>
      </div>
      <div class="serch">
        <div><img src="img/liuimg/youpin_03.jpg" alt="" /></div>
        <div class="inserch">
          <input type="text" />
          <span class="iconfont icon-sousuo" id="iconsousuo"></span>
          <span class="iconfont icon-yuyin" id="iconyuyin"></span>
          <span class="inserch-text">搜索</span>
        </div>
        <div class="shoppingcar">
          <router-link to="/gouwuche"> <span class="iconfont icon-gouwuchekong"></span> </router-link>    
        </div>
      </div>
      <div class="lunbo"><lunboliu /></div>
      <div class="gowhere">
        <div class="gowhere1">
          <div class="shiliangtu">
            <span class="iconfont icon-xiaomi"></span>
            <span class="iconfont icon-iphone"></span>
            <span class="iconfont icon-huawei"></span>
            <span class="iconfont icon-vivo"></span>
            <span class="iconfont icon-oppo"></span>
          </div>
          <div class="gowherelist">
            <ul>
              <li>小米</li>
              <li>苹果</li>
              <li>华为</li>
              <li>vivo</li>
              <li>oppo</li>
            </ul>
          </div>
        </div>
        <div class="gowhere2">
          <div class="shiliangtu2">
            <router-link to="/youhui">
              <span class="iconfont icon-gouwudai_"></span> </router-link
            ><span class="iconfont icon-tel"></span>
             <router-link to="/goujizhijiang"><span class="iconfont icon-yiyuanmiaosha"></span>  </router-link> 
            <span class="iconfont icon-baokuan-"></span>
            <span class="iconfont icon-gengduo"></span>
          </div>
          <div class="gowherelist2">
            <ul>
              <li><span>优惠购机</span></li>
              <li><span>信用购机</span></li>
              <li><span>低至1元</span></li>
              <li><span>爆款手机</span></li>
              <li><span>更多</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <h3>新品首发</h3>
    <div class="huodong">
      <div class="hdz">
        <div class="hdzuo">
          <router-link to="/Yiyuan">
            <img src="img/liuimg/huodong.jpg" alt="" />
          </router-link>
        </div>

        <div class="hdyou">
          <img src="img/liuimg/huodong2.jpg" alt="" />
          <img src="img/liuimg/huodong3.jpg" alt="" />
          <img src="img/liuimg/huodong4.jpg" alt="" />
        </div>
      </div>
    </div>
    <h3>移动特惠</h3>
    <div class="movepicture">
      <div class="movep-center">
        <div class="movephone">
          <div class="phone">
            <img src="img/liuimg/iphone13.jpg" alt="" />
          </div>
          <div class="phonetext">
            <h4>苹果13</h4>
            <h2>5499元</h2>
            <s>8999</s>
          </div>
        </div>
        <div class="movephone">
          <div class="phone">
            <img src="img/liuimg/hoverX20.jpg" alt="" />
          </div>
          <div class="phonetext">
            <h4>荣耀X20</h4>
            <h2>1元</h2>
            <s>2999</s>
          </div>
        </div>
        <div class="movephone">
          <div class="phone">
            <img src="img/liuimg/samsungF52.jpg" alt="" />
          </div>
          <div class="phonetext">
            <h4>三星F52</h4>
            <h2>1元</h2>
            <s>3325</s>
          </div>
        </div>
        <div class="movephone">
          <div class="phone">
            <img src="img/liuimg/hover60.jpg" alt="" />
          </div>
          <div class="phonetext">
            <h4>荣耀50</h4>
            <h2>1元</h2>
            <s>1999</s>
          </div>
        </div>
        <div class="movephone">
          <div class="phone">
            <img src="img/liuimg/xiaomi12x.png" alt="" />
          </div>
          <div class="phonetext">
            <h4>xiaomi12x</h4>
            <h2>1元</h2>
            <s>2919</s>
          </div>
        </div>
      </div>
    </div>
    <div class="choose">
      <div class="choosecen">
        <span>移动优选</span>
        <span>手机</span>
        <span>智能硬件</span>
      </div>
    </div>
    <div class="goodlist">
      <div class="goodlistcen">
        <div class="goodlistbig">
          <div class="goodlistsmall">
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/iphone13.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>iphone13</span><br />
                <span style="color: gray; font-size: 0.12rem">已售2685件</span
                ><br />
                <span>5499</span><s>8999</s>
              </div>
            </div>
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/iphone13.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>iphone13</span><br />
                <span style="color: gray; font-size: 0.12rem">已售2685件</span
                ><br />
                <span>5499</span><s>8999</s>
              </div>
            </div>
          </div>
          <div class="goodlistsmall">
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/iphone13.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>iphone13</span><br />
                <span>已售2689件</span><br />
                <span>5499</span><s>8999</s>
              </div>
            </div>
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/iphone13.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>iphone13</span><br />
                <span style="color: gray; font-size: 0.12rem">已售2685件</span
                ><br />
                <span>5499</span><s>8999</s>
              </div>
            </div>
          </div>
          <div class="goodlistsmall">
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/xiaomi12x.png" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>小米12</span><br />
                <span style="color: gray; font-size: 0.12rem">已售2685件</span
                ><br />
                <span>1元起</span><s>3699</s>
              </div>
            </div>
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/xiaomi12x.png" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>小米12</span><br />
                <span style="color: gray; font-size: 0.12rem">已售549件</span
                ><br />
                <span>1元起</span><s>3699</s>
              </div>
            </div>
          </div>
          <div class="goodlistsmall">
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/xiaomi12x.png" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>小米12</span><br />
                <span style="color: gray; font-size: 0.12rem">已售2685件</span
                ><br />
                <span>1元起</span><s>3699</s>
              </div>
            </div>
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/xiaomi12x.png" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>小米12</span><br />
                <span style="color: gray; font-size: 0.12rem">已售549件</span
                ><br />
                <span>1元起</span><s>3699</s>
              </div>
            </div>
          </div>
          <div class="goodlistsmall">
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/hover60.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>华为60</span><br />
                <span style="color: gray; font-size: 0.12rem">已售669件</span
                ><br />
                <span>1元起</span><s>5699</s>
              </div>
            </div>
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/hover60.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>华为60</span><br />
                <span style="color: gray; font-size: 0.12rem">已售669件</span
                ><br />
                <span>1元起</span><s>5699</s>
              </div>
            </div>
          </div>
          <div class="goodlistsmall">
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/hover60.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>华为60</span><br />
                <span style="color: gray; font-size: 0.12rem">已售669件</span
                ><br />
                <span>1元起</span><s>5699</s>
              </div>  
            </div>
            <div class="litgoodlist">
              <div class="goodlistimg">
                <router-link to="/xiangqing">
                  <img src="img/liuimg/hover60.jpg" alt="" />
                </router-link>
              </div>
              <div class="goodlist-text">
                <span>华为60</span><br />
                <span style="color: gray; font-size: 0.12rem">已售669件</span
                ><br />
                <span>1元起</span><s>5699</s>
              </div>
            </div>
          </div>
          <div class="rubish"></div>
        </div>
      </div>
    </div>

    <Bottom />
  </div>
</template>

<script>
import lunboliu from "@/components/liu/lunboliu.vue";
export default {
  components: {
    lunboliu,
  },
};
</script>

<style>
.html {
  height: 100%;
  width: 100%;
}
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.serch {
  width: 100%;
  height: 0.8rem;
  border-top: 1px gray solid;
  display: flex;
}
.serch span {
  font-size: 0.16rem;
}
.serch img {
  width: 0.8rem;
  height: 0.8rem;
}
.serch input {
  width: 2.5rem;
  border-radius: 0.1rem;
  border: 1px gray solid;
  margin-top: 0.35rem;
  height: 0.2rem;
}
.inserch {
  position: relative;
  width: 2.5rem;
}
#iconsousuo {
  position: absolute;
  top: 0.37rem;
}
#iconyuyin {
  position: absolute;
  top: 0.38rem;
  right: 0.39rem;
}
.inserch-text {
  position: absolute;
  top: 0.36rem;
  font-size: 0.12rem;
  right: 0rem;
  background-color: aqua;
  height: 0.2rem;
  border-radius: 0.1rem;
  width: 0.4rem;
  text-align: center;
  color: white;
}
.shoppingcar {
  position: absolute;
  right: 0.15rem;
  top: 0.55rem;
  font-size: 0.2rem;
}
.gowhere span {
  font-size: 0.4rem;
}
.gowhere1 {
  display: flex;
  flex-direction: column;
}

.shiliangtu span {
  background-color: gray;
  border: 1px gray solid;
  color: bisque;
  border-radius: 0.1rem;
}
.shiliangtu {
  display: flex;
  justify-content: space-around;
}
.gowherelist ul {
  display: flex;
  justify-content: space-around;
  font-size: 0.12rem;
}
.gowhere2 {
  display: flex;
  flex-direction: column;
}

.shiliangtu2 span {
  background-color: gray;
  border: 1px gray solid;
  color: bisque;
  border-radius: 0.1rem;
}
.shiliangtu2 {
  display: flex;
  justify-content: space-around;
}

.gowherelist2 span {
  font-size: 0.12rem;
}
.gowherelist2 ul {
  display: flex;
  justify-content: space-around;
}
.gowherelist2 li {
  width: 0.65rem;
  text-align: center;
}
h3 {
  padding-left: 0.18rem;
}
.huodong {
  width: 100%;
  height: 2.32rem;
}
.hdz {
  width: 3.28rem;
  height: 2.32rem;
  margin: 0 auto;

  display: flex;
}
.hdzuo img {
  width: 1.6rem;
  height: 2.31rem;
}
.hdyou {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hdyou img {
  width: 1.6rem;
  height: 0.72rem;
  margin-left: 0.08rem;
}
.movepicture {
  width: 100%;
  height: 1.8rem;
}
.movep-center {
  width: 3.28rem;
  height: 1.6rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex: 1;
  overflow: auto;
}
.movepicture img {
  width: 0.87rem;
  height: 0.87rem;
}
.phonetext {
  text-align: center;
}
.movephone {
  width: 0.87rem;
  height: 1.6rem;
  margin-right: 0.05rem;
  flex-shrink: 0;
}
.movephone h2 {
  color: red;
}
.movephone s {
  color: gray;
}
.choose {
  width: 100%;
  height: 0.3rem;
}
.choosecen {
  width: 3.28rem;
  height: 0.3rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: gray;
}
.choosecen span:hover {
  color: black;
  border-bottom: blue solid 3px;
}
.goodlist {
  width: 100%;
  min-height: 2rem;
}
.goodlistcen {
  width: 3.28rem;
  min-height: 2rem;
  margin: 0 auto;
}
.goodlistbig {
  width: 3.28rem;
  height: 2.32rem;
}
.goodlistsmall {
  width: 3.28rem;
  height: 2.32rem;
  display: flex;
  justify-content: space-between;
}
.goodlistimg img {
  width: 1.5rem;
  height: 1.6rem;
  border: 3px whitesmoke solid;
  border-radius: 0.1rem;
}
.goodlist-text s {
  color: gray;
  font-size: 0.12rem;
}
.rubish {
  height: 2rem;
  width: 100%;
}
</style>